<template>
  <div>
    
        <el-form-item label="手持证件照" prop="enterpriseCardHand">
            <div class="idImgesBox">
                <div class="idImgaeLeft">
                    <el-upload
                        list-type="picture-card"
                        :action="action"
                        :show-file-list="false"
                        :on-success="handleShopLogo"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar"  width="200" height="150"/>
                        <i v-else class="el-icon-plus avatar-uploader-icon" />
                        <!-- <img
                            v-if="imageUrl"
                            :src="imageUrl"
                            class="avatar"
                        />
                        <div v-else class="noImg">
                        <div class="bgBox">
                            <img
                            src="../../assets/images/shenfenz@2x.png"
                            alt=""
                            />
                        </div>
                        </div>
                        <div class="changeImg">更换</div>
                        <div class="bgInfo">手持证件照</div> -->
                    </el-upload>
                </div>
            </div>
            <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
                <div class="cropper-content">
                    <div class="cropper" style="text-align:center">
                        <vueCropper
                            ref="cropper"
                            :img="option.img"
                            :outputSize="option.outputSize"
                            :outputType="option.outputType"
                            :info="option.info"
                            :canScale="option.canScale"
                            :autoCrop="option.autoCrop"
                            :autoCropWidth="option.autoCropWidth"
                            :autoCropHeight="option.autoCropHeight"
                            :fixed="option.fixed"
                            :fixedBox="option.fixedBox"
                            :fixedNumber="option.fixedNumber"
                        ></vueCropper>
                    </div>
                    <div class="Tips">滚轮可以放大缩小图片</div>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="rotateLeftHandle">左旋转</el-button>
                    <el-button @click="rotateRightHandle">右旋转</el-button>
                    <el-button @click="changeScaleHandle(1)">放大</el-button>
                    <el-button @click="changeScaleHandle(-1)">缩小</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="finish">确认</el-button>
                </div>
            </el-dialog>
            <div class="exampleBox">
                <div class="triangle"></div>
                <div class="exampleContent">
                    <div class="exampleContentImg">
                        <div class="img" @click="exampleVisible = true"></div>
                    </div>
                    <div class="exampleContentText">
                    <div class="top">
                        <p class="radius"></p>
                        <p class="text">请上传清晰完整的照片</p>
                    </div>
                    <div class="bottom">
                        <p class="radius"></p>
                        <p class="text">可上传扫描件或清晰完整的照片</p>
                    </div>
                    </div>
                </div>
            </div>
            <el-dialog title="示例图片" :visible.sync="exampleVisible" append-to-body>
                <div class="dialogImg">
                    <img src="../../assets/images/enterpriseCardHand.png" alt="">
                </div>
            </el-dialog>
        </el-form-item>
    
  </div>
</template>
<script>
import {VueCropper} from 'vue-cropper'
import { listSearchMixin } from "@/config/mixin";
import api from "@/api";
export default {
  mixins: [listSearchMixin],
  components: {
    VueCropper
  },
  data(){
    return{
      action: api.upload,
      imageUrl: '',
      dialogVisible: false,
      exampleVisible: false,
      // 裁剪组件的基础配置option
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 240, // 默认生成截图框宽度
        autoCropHeight: 180, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [4, 3], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        canMove:true,
      },
      picsList: [], //页面显示的数组
      // 防止重复提交
      loading: false,
      fileinfo:{}
    }
  },
  methods: {
    handleShopLogo(res, file) {//店铺logo
        //上传成功后将图片地址赋值给裁剪框显示图片
        this.$nextTick(() => {
        this.option.img = URL.createObjectURL(file.raw);
        this.fileinfo = res
        this.dialogVisible = true
        })
    },
    changeScaleHandle(num) {
        num = num || 1;
        this.$refs.cropper.changeScale(num);
    },
    // 左旋转
    rotateLeftHandle() {
        this.$refs.cropper.rotateLeft();
    },
    // 右旋转
    rotateRightHandle() {
        this.$refs.cropper.rotateRight();
    },
   beforeAvatarUpload(file) {
    const isJPG = file.type === 'image/jpeg'||file.type==='image/png';
    const isLt2M = file.size / 1024 / 1024 < 2;
 
    if (!isJPG) {
     this.$message.error('上传头像图片只能是 JPG 格式!');
    }
    if (!isLt2M) {
     this.$message.error('上传头像图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
   },
    cancel() {
        this.loading = false
    },
    finish(res) {
        this.$refs.cropper.getCropBlob((data) => {
            let picFile = new File([data], `${(new Date).getTime()}.png`);
            let fd = new FormData()
            fd.append('file', picFile)
            let params = {
                url: this.action,
                method: 'POST',
                data: fd
            }
            this.sendReq(params, res => {
                console.log(res)
                this.loading = true
                this.dialogVisible = false
                this.imageUrl = res.data.url
                this.$emit('enterpriseCardHandChild', this.imageUrl);
            })
        })
    }
  }
}
</script>
<style  lang="scss" scoped>
/deep/ .el-upload--picture-card{
    width: 200px;
    height: 150px;
}
    .idImgesBox {
        width: 800px;
        display: flex;
        justify-content: space-between;
        .idImgaeLeft {
            width: 50%;
        }
        .idImgaeRight {
            width: 50%;
            text-align: right;
        }
        >>> .el-upload--picture-card {
            position: relative;
            .avatar {
                width: 100%;
                max-height: 178px;
            }
            .noImg {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                background: #f7f7f7;
                .bgBox {
                    height: 149px;
                    align-items: center;
                    display: flex;
                    justify-content: center;
                }
            }
            .bgInfo {
                color: #ffffff;
                font-size: 14px;
                height: 39px;
                line-height: 39px;
                background: #a0c1ff;
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
            }
            .changeImg {
                display: none;
                position: absolute;
                top: 40px;
                left: 112px;
                width: 60px;
                height: 60px;
                line-height: 60px;
                background: #000000;
                opacity: 0.6;
                border-radius: 50%;
                color: #ffffff;
            }
            .zoomImg {
                position: absolute;
                top: 40px;
                left: 50px;
                width: 60px;
                height: 60px;
                line-height: 60px;
                background: #000000;
                opacity: 0.6;
                border-radius: 50%;
                color: #ffffff;
            }
            &:hover {
                .changeImg {
                    display: block;
                }
            }
        }
        >>> .el-upload-list--picture-card .el-upload-list__item {
            width: 284px;
            height: 180px;
        }
    }
    .dialogImg {
        img {
            max-width: 100%;
        }
    }
    .exampleBox {
        width: 716px;
        height: 192px;
        .exampleContent{
            position: relative;
            top:10px;
            right:0px;
            width:714px;
            height:180px;
            padding:8px;
            background-color: #F7F7F7;
            border: #CACACA solid 1px;
            border-radius: 10px;
            .exampleContentImg {
                width: 200px;
                height: 150px;
                background: url(../../assets/images/enterpriseCardHand.png) no-repeat 0 0;
                background-size:100% 100%;
                float: left;
                margin-left: 20px;
                margin-top: 10px;
                position: relative;
                .img {
                    width: 60px;
                    height: 27px;
                    background: url(../../assets/images/example@2x.png) no-repeat 0 0;
                    background-size:100% 100%;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }
            }
            .exampleContentText {
                float: left;
                margin-top: 21px;
                margin-left: 20px;
                .top {
                    overflow: hidden;
                }
                .radius {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: #999999;
                    float: left;
                    position: relative;
                    top: 16px;
                }
                .text {
                    float: left;
                    margin-left: 11px;
                    font-size: 20px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #666666;
                }
            }
          }
        .exampleContent:before{
            box-sizing: content-box;
            width: 0px;
            height: 0px;
            position: absolute;
            top: -16px;;
            left:88px;
            padding:0;
            border-bottom:8px solid #F7F7F7;
            border-top:8px solid transparent;
            border-left:8px solid transparent;
            border-right:8px solid transparent;
            display: block;
            content:'';
            z-index: 12;
        }
        .exampleContent:after{
            box-sizing: content-box;
            width: 0px;
            height: 0px;
            position: absolute;
            top: -18px;;
            left:87px;
            padding:0;
            border-bottom:9px solid #CACACA;
            border-top:9px solid transparent;
            border-left:9px solid transparent;
            border-right:9px solid transparent;
            display: block;
            content:'';
            z-index:10
        }
    }
    .tipsText {
        width: 100px;
    }
    .Tips {
        font-size: 16px;
        color: red;
    }
    .cropper-content{
        width:500px;height:500px;background: pink;
    }
    .cropper{
        width:500px;
        height:500px;
        background: yellow;
    }
</style>